import React, { Component } from 'react';

const TargetElement = React.forwardRef((props, ref) => { // 因为targetElement是无状态函数，本来是没有实例的，无法传ref属性。通过forwardRef来引入ref
  return (
    <input
      {...props}
      ref={ref}
    />
  )
})


// const TargetElement = (props) => { // Function components cannot be given refs
//   return (
//     <input
//       {...props}
//     />
//   )
// }



export default class ForwardRefTest extends Component {
  constructor() {
    super();
    this.inputRef = React.createRef();
  }

  render() {
    console.log(<TargetElement
      type="text"
      defaultValue="forward ref test"
      ref={this.inputRef}
    />);
    return (
      <TargetElement
        type="text"
        defaultValue="forward ref test"
        ref={this.inputRef}
      />
    )
  }

  componentDidMount() {
    this.inputRef.current.value = 'forward ref got'
  }
}
